<div id="content">
	<div class="row s_page_title" >
		<sa-big-breadcrumbs [items]="['运输任务','任务数据看板']" icon="fa fa-truck" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<!--表格头部操作部分-->
	
	<div class="s_table" style="padding-left: 0;">
		<!--<h3 class="s_table_title"><span class="verticalLine">&nbsp;</span>车辆任务看板</h3>-->
		
		
		<div class="page-header clearfix s_table_opreation" style="border-bottom: none;position: relative;">
			<div class="left page-header-btn">
				<!--<div class="top_module">
					<span class="module_text">公司名称</span>
					<div class="company_tree" style="display: inline-block;vertical-align: middle;">
						<div class="clearfix" style="position: relative;">
							<div class="s_hover_box s_fix_radius">
								<input class="form-control tree_company_input"  id="company" name="selectedCompanyName" (input)="companySearch()" autocomplete="off" [(ngModel)]='selectedCompanyName' (click)="companyClick()" type="text" placeholder="请选择或输入关键字" />
								<div class="s_del_icon" (click)='delText()'>x</div>
							</div>
							<div class="s_tree_box" id="tree_box">
								<div class="vision_tree" id="vision_tree">
									<div id="tree"></div>
								</div>
							</div>
						</div>
			     	</div>
				</div>-->
				<div class="top_module">
					<span class="module_text">车牌号</span>
					<div class="s_hover_box">
						<select   class="select2"  id="carNumberSelect2">
							<option value=''></option>
						</select>
						<div class="s_del_icon" (click)='del_carNumber()'>x</div>
					</div>
				</div>
				
				<!--<div class="top_module" >
					<span class="module_text">设备ID</span>
					<input  class="module_inp"  type="text" style="padding-left: 12px;"  [(ngModel)]="deviceId" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')"   placeholder=" 选择或输入编号..."  />
				</div>-->
				
				
				
				<div class="selectDate top_module">
					<div class="input-daterange input-group s_selected_time_box s_hover_box">
						<input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker1"  autocomplete="off" placeholder="选择开始时间"/>
						<span class="s_selected_time_spe">至</span>
						<input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker2"  autocomplete="off" placeholder="选择结束时间"/>
						<div class="s_del_icon" (click)='del_date()'>x</div>
					</div>
				</div>
				<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
			</div>
			
			
		</div>
		<!--表格头部操作部分end-->
			
		<div style="background: white;height: 72vh;min-height: 700px;">
			<!--车辆状态数量统计部分-->
			
				
			<!--表格部分-->
			<div class="col-xs-12 col-sm-5 taskHtml" style="position: relative;height: 100%;">
				
				<div style="min-height: 31px;border: 1px solid #ccc; border-bottom: none;"></div>
				<div class="clearfix s_btn_group" >
		          	<button class="btn btn-primary" [ngClass]="{isAtive:btnNum === 'all'}" (click)="btnClick('all')" style="border-right: 1px solid #ddd;">全部 {{allTotal}}
		          	</button><button class="btn btn-primary" [ngClass]="{isAtive:btnNum === 'normal'}" (click)="btnClick('normal')" style="border-right: 1px solid #ddd;">卸货状态<span class="green">[正常] {{normalTotal}}</span>
		          	</button><button class="btn btn-primary" [ngClass]="{isAtive:btnNum === 'abnormal'}" (click)="btnClick('abnormal')" style="border-right: 1px solid rgb(238,238,238);">卸货状态<span class="red">[异常] {{abnormalTotal}}</span></button>
		        </div>
				<div sa-widget [editbutton]="false" color="darken" style="border-top: 1px solid #eee;height: 100%;">
					<div style="min-height: 90%;padding: 0;">
						<sa-widgets-grid>
							<div class="s_table">
								<div sa-widget [editbutton]="false" color="darken" class="clearfix">
									<div>
										<div class="widget-body no-padding">
											<div class="table_scroll">
												<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table" style="margin: 0 !important;">
													<thead>
														<tr>
															<th>任务编号</th>
															<th>车牌号码</th>
															<th>状态</th>
														</tr>
													</thead>
													<tbody>                              
														<tr *ngFor="let row of tableData" [ngClass]="{selected:activeSelected === row.id}" (click)="rowSelectEvent(row)">
															<td>{{row.taskId}}</td>
															<td>{{row.carNumber}}</td>
															<td>
																<span *ngIf="row.status === -1" class="red">卸货异常[未在指定区域卸货]</span>
													            <span *ngIf="row.status === 1" class="green">正常卸货</span>
													            <span *ngIf="row.status === 2">在途</span>
													            <span *ngIf="row.status === 3">在场</span>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
											<div class="table-fix clearfix">
												<paginator [totalRecords]="totalCount"
											           [rows]="pageSize"
											           [isPageSize]="false"
											           [isPageCount]='false'
											           [isJump]="false"
											           [currentPage]="curPage - 1"
											           (onPageChange)="paginate($event)">
												</paginator>
												<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</sa-widgets-grid>
					</div>
				</div>
				
				
			</div>
			<!--表格部分end-->
		
			<!--地图折线部分-->
			<div class="col-xs-12 col-sm-7" style="height: 100%;background: white;">  
			
			
				<div class="chartBox" style="height: 35%;padding-bottom:12px;">
					<div style="border:1px solid #ccc;height: 100%;border-radius: 5px;position: relative;">
						
						<div class="inCheck" onselectstart="return false">
				       		
				       		<label class="checkbox-inline" style="font-weight: normal;">
								<input  type="checkbox"  class="checkbox isEnter"  [(ngModel)]='isEnter' (change)="isEnterChange()" />
					            <span  style="margin-left: 0;font-weight: normal;">特价区</span>
					       	</label>
						</div>
						<div id="myChart" style="height: 100%;width: 100%;"></div>
					</div>
				</div>
				
				
				<div class="mapBox" style="height: 40%;padding: 8px;border:1px solid #ccc;border-radius: 5px;" > 
					<div class="map-box" style="height: 100%;width: 100%;">
						<div id="baiduMap" style="height: 100%;width: 100%;"></div>
						<sa-bmap-tools [baiduMap]="baiduMap" [isShowZoom]="false"></sa-bmap-tools>
					</div>
					
				
				</div>
			
			
			
				<div class="mapBox" style="height: 25%;padding: 12px 0 8px 0;" > 
					<div style="overflow: auto;;border:1px solid #ccc;padding: 8px 0;border-radius: 5px;height: 100%;" class="row">
						<p class="col-xs-12" style="font-size: 15px;font-weight: bold;line-height: 24px;">基本信息</p>
						<div *ngFor="let item of basInformation"  style="line-height: 24px;min-width: 120px;font-size: 12px; margin-right:48px;display: inline-block;padding-left: 12px;">
							{{item.textStr}} :  {{item.value}}
						</div>
					</div>
				</div>	
			</div>
		</div>
	</div>


	

</div>